<template>
	<view class="container">
		<navbar :showBack='false' :background='background' :bgSize='bgSize'></navbar>
		<view class="bg">
			<image :src='hostUrl+"/static/img/user.png"'>
			</image>
		</view>
		<view class="wrap">
			<!-- 个人信息 -->
			<view class="user-wrap" v-if='!token' @tap='auth_nav'>
				<view class="user-head">
					<image src='/static/user-head.png'></image>
				</view>
				<view class="user-info">
					<view class="user-nick">
						<view class="nickname">
							<view class="nick-text">立即登录</view>
						</view>
						<uni-icons type='right' color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="user-wrap" v-else @tap='userInfo.u_nickname?update_info():setUinfoModal()'>
				<view class="user-head">
					<image :src='userInfo.u_avatar ? userInfo.u_avatar : "/static/user-head.png"'></image>
				</view>
				<view class="user-info">
					<view class="user-nick">
						<view class="nickname">
							<view class="nick-text">{{userInfo.u_nickname? userInfo.u_nickname : '授权头像昵称'}}</view>
						</view>
					</view>
					<view class="share_code">
						<text>ID: {{userInfo.u_nickname? userInfo.u_id : '暂无'}}</text>
						<image v-if="userInfo.u_nickname" src="../../../static/copy.png" mode=""
							@tap.stop="copy(userInfo.u_id)"></image>
					</view>
				</view>
			</view>
			<view class="tool-main">
				<view class="base-wrap">
					<view class="order-wrap">
						<view class="order-con">
							<view class="order-item" v-for='(item,index) in order' @tap='jumpOrderList(1,index)'>
								<view class="order-icon">
									<image :src='item.icon'></image>
								</view>
								<view class="order-text">{{item.text}}</view>
							</view>
							<button class="order-item" open-type="contact">
								<view class="order-icon">
									<image src='/static/user/shouhou.png'></image>
								</view>
								<view class="order-text">售后</view>
							</button>
						</view>
					</view>
				</view>
				<view class="base-wrap" v-if='token && userInfo.identity > 0'>
					<view class="manager-wrap">
						<view class="manager-item" @click='toIdentityPage(0)' v-if='userInfo.identity == 1'>
							<view>经理</view>
							<view class="icon">
								<image src='/static/user/jingli.png'></image>
							</view>
						</view>
						<view class="manager-item" @click='toIdentityPage(1)' v-if='userInfo.identity == 2'>
							<view>员工</view>
							<view class="icon">
								<image src='/static/user/yuangong.png'></image>
							</view>
						</view>
					</view>
				</view>
				<view class="base-wrap tool-wrap">
					<view class="tool-item" @tap='jumpToolPage(index)' v-for="(item,index) in tool">
						<view class="tool-left">
							<view class="tool-icon">
								<image :src='item.icon'></image>
							</view>
							<text style="font-size: 28rpx;margin-left: 5rpx;">{{item.text}}</text>
						</view>
						<!-- <uni-icons type='right' color='#999' size="14"></uni-icons> -->
						<image
							src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/29ef2a069086d53d8ddab2dd8c3a551d87aedda4.png"
							mode="" style="width: 44rpx;height: 44rpx;"></image>
					</view>
					<view class="tool-item" @click="resourcesnav()">
						<view class="tool-left">
							<view class="tool-icon">
								<image src='/static/user/download.png'></image>
							</view>
							资源下载
						</view>
						<image
							src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/29ef2a069086d53d8ddab2dd8c3a551d87aedda4.png"
							mode="" style="width: 44rpx;height: 44rpx;"></image>
					</view>
				</view>
			</view>
			<view class="goods-wrap">
				<view class="title">
					<text>好物推荐</text>
				</view>
				<view class="goods-con">
					<view class="goods-item-con" v-for='(item,index) in goodsList' @tap='jumpGoodsDetail(item.g_id)'>
						<goods-item :goodsType='1' :item='item' @handleGoods='handleGoods(item)'></goods-item>
					</view>
				</view>
				<view class="loding-con">
					<view class="loding-end line_center" v-if='loadEnd'>
						<view>-</view>
						<view class="end-t">已经到底啦</view>
						<view>-</view>
					</view>
					<view class="loding line_center" v-else>
						正在加载中~~
					</view>
				</view>
			</view>
		</view>
		<!-- 资源下载 -->
		<view class="auth_box" v-if="auth_status">
			<view class="auth_box_bg">
				<view class="auth_box_top">
					<text>资源下载链接</text>
					<image
						src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/a7b8929ac9d99d9dafd0fb51d719f42b8e2cd76b.png"
						mode="" @click="download_add()"></image>
				</view>

				<view class="auth_box_message">
					<text>{{download_url}}</text>
					<view class="copy" @click="paste(download_url)">
						复制
					</view>
				</view>

				<view class="texts">
					复制上方链接至浏览器打开
				</view>
			</view>

		</view>
		<!-- <view class="bot_text" @click="webview_nav()">
			<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/ad7e572f5611928b5c196a7dba20559f58b118e7.jpg" mode=""></image>
			<text>宛初云技术支持</text> 
		</view> -->
		<dialog-modal :showModal='showModal'></dialog-modal>
		<update-user-info :showModal="showUInfoModal" @close='close'></update-user-info>
		<agreement :showAgreementModal='showAgreementModal' @close='closeXieyi' @agree='toStaff' ref='agr'></agreement>
	</view>
</template>

<script>
	const app = getApp();
	import dialogModal from '@/components/dialog-modal/dialog-modal.vue';
	import goodsItem from '@/components/goods-item/goods-item.vue';
	import updateUserInfo from '../../../components/update-user-info/update-user-info.vue';
	import agreement from '../../../components/agreement/agreement.vue';
	export default {
		components: {
			dialogModal,
			goodsItem,
			updateUserInfo,
			agreement
		},
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				userInfo: {},
				showModal: false,
				child_num: '',
				auth_status: false,
				download_url: '',
				goodsList: [],
				loadEnd: true,
				order: [{
						icon: "/static/user/daifukuan.png",
						text: '待付款',
						path: '/pages/user/my-order/my-order?index=1'
					},
					{
						icon: '/static/user/daifahuo.png',
						text: '待发货',
						path: '/pages/user/my-order/my-order?index=2'
					},
					{
						icon: '/static/user/daishouhuo.png',
						text: '待收货',
						path: '/pages/user/my-order/my-order?index=3'
					},
					{
						icon: '/static/user/yiwancheng.png',
						text: '已完成',
						path: '/pages/user/my-order/my-order?index=4'
					},
				],
				elseL: [{
						text: '团队中心',
						tip: '推广中心',
						icon: '/static/tui.png',
						path: '/pages/user/team/team',
						id: 0,
					},
					{
						text: '积分商城',
						tip: '积分兑换商品',
						icon: '/static/jifen.png',
						path: '/pages/tab-page/integral/integral',
						id: 1,
					}
				],
				tool: [{
						text: '推广中心',
						icon: '/static/user/tuiguang.png',
						// path: '/pages/user/team/team'
						path: '/pages/user/staff/staff?type=2'
					},{
						text: '账户资料',
						icon: '/static/user/zhanghu.png',
						path: '/pages/user/account/account'
					}, {
						text: '我的地址',
						icon: '/static/user/dizhi.png',
						path: '/pages/user/address/address?type=2'
					},
					{
						text: '联系我们',
						icon: '/static/user/concat.png',
						path: '/pages/user/kefu/kefu'
					},
				],
				background: `url(${app.globalData.hostUrl}/static/img/user.png)`,
				bgSize: '100% 420rpx',
				token: '',
				showUInfoModal: false,
				showAgreementModal: false,
			};
		},
		onShow() {
			this.reload()
		},
		onLoad() {
			this.getGoods()
		},
		methods: {
			reload() {
				this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : "";
				/* this.userInfo = {}; */
				this.getUserInfo();
			},
			/* 获取商品列表 */
			getGoods() {
				let that = this;
				app.globalRequest({
					api: app.getApi().home.goods
				}).then(res => {
					if (res.code == 1) {
						let goodsList = res.data;
						goodsList.forEach(v => {
							v.priceObj = app.splicePrice(v.price);
							v.num = 1;
						})
						that.goodsList = goodsList;
					}
				}).catch(err => {

				})
			},
			/* 跳转商品详情 */
			jumpGoodsDetail(g_id) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?type=1&goods_id=${g_id}`,
				})
			},
			// 跳转会员编辑
			update_info() {
				uni.navigateTo({
					url: '/pages/user/edit_info/edit_info'
				})
			},
			copy(code) {
				console.log(code)
				uni.setClipboardData({
					data: String(code), //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			download_add() {
				this.auth_status = !this.auth_status
			},
			// 复制
			paste(value) {
				uni.setClipboardData({
					data: value, // data的值为你要复制的内容
					success: res => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			resourcesnav() {
				if (!this.token) {
					this.auth_nav()
					return;
				}
				uni.navigateTo({
					url: '/pages/user/resources/resources'
				})
			},
			// 技术支持
			webview_nav() {
				uni.navigateTo({
					url: '/pages/user/webview/webview'
				})
			},
			// 授权跳转
			auth_nav() {
				uni.navigateTo({
					url: '/pages/user/login/login_auth'
				})
			},
			//显示 授权头像昵称弹窗
			setUinfoModal() {
				this.showUInfoModal = true;
			},
			/* 获取用户信息 */
			getUserInfo() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						let userInfo = res.data.uInfo;
						userInfo.mobile = userInfo.mobile ? app.formateTel(userInfo.mobile) : null;
						that.userInfo = userInfo;
						that.child_num = res.data.childNum
						that.download_url = res.data.resource_down_url;
						if (!userInfo.u_nickname) {
							that.showUInfoModal = true;
						}
					}
				}).catch(err => {

				})
			},
			jumpOrderList(type, index) {
				if (!this.token) {
					this.auth_nav()
					return;
				}
				switch (Number(type)) {
					case 0:
						uni.navigateTo({
							url: '/pages/user/my-order/my-order?index=0'
						})
						break;
					case 1:
						uni.navigateTo({
							url: this.order[index].path
						})
						break;
				}
			},
			jumpToolPage(index) {
				if (!this.token) {
					this.auth_nav()
					return;
				}
				uni.navigateTo({
					url: this.tool[index].path
				})
			},
			toIdentityPage(type) {
				let path = ''
				if (!this.token) {
					this.auth_nav()
					return;
				}
				switch (Number(type)) {
					case 0:
						path = '/pages/user/manager/manager';
						uni.navigateTo({
							url: path
						})
						break;
					case 1:
						if (this.userInfo.is_staff_read == 0) {
							this.showAgreementModal = true;
							this.$refs.agr.isDisabled = true;
							return;
						}
						this.toStaff()
						break;
				}

			},
			toStaff() {
				this.showAgreementModal = false;
				uni.navigateTo({
					url: '/pages/user/staff/staff'
				})
			},
			close() {
				this.showUInfoModal = false;
				this.reload()
			},
			closeXieyi() {
				this.showAgreementModal = false;
			}
		}

	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.bg {
		width: 100%;
		height: 420rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.wrap {
		position: relative;
		z-index: 2;
		padding-bottom: 5rpx;
	}

	.user-wrap {
		display: flex;
		align-items: center;
		padding: 10rpx 48rpx 0 35rpx;

		.user-head {
			width: 112rpx;
			height: 112rpx;
			border-radius: 100%;
			overflow: hidden;
			background: #ccc;
			margin-right: 20rpx;
		}

		.user-nick {
			display: flex;
			align-items: center;
			padding-top: 10rpx;

			.nickname {
				max-width: 250rpx;
				font-size: 32rpx;
				color: #fff;

				.nick-text {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.commission_box {
			position: absolute;
			top: 70rpx;
			right: 0;
			padding: 7rpx 40rpx;
			box-sizing: border-box;
			background-color: #5B5B60;
			border-radius: 40rpx 0 0 40rpx;

			text {
				color: #fff;
				font-size: 28rpx;
			}
		}

		.bg_grade {
			width: 83rpx;
			height: 30rpx;
			background: url('https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/323b3f7beee86ea00bcbfc7c5ebc515954653088.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			font-weight: bold;
			font-style: italic;
			color: #fff;
			line-height: 20rpx;
			padding-left: 18rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			margin-left: 10rpx;
		}
	}

	.base-wrap {
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.tool-main {
		margin: 0 30rpx;
		// background: #fff;
		// border-radius: 16rpx 16rpx 0 0;
		margin-top: 34rpx;
	}

	.manager-wrap {
		display: flex;
		justify-content: space-between;

		.manager-item {
			flex: 1;
			height: 112rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			background: #FAFBFC;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 56rpx;
				height: 56rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.order-wrap {
		.title-wrap {
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 32rpx;
				color: #333333;
			}

			.go {
				display: flex;
				align-items: center;
			}
		}

		.order-con {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			.order-item {
				flex: 1;

				.order-icon {
					width: 64rpx;
					height: 64rpx;
					margin: auto;
				}

				.order-text {
					text-align: center;
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #333333;
				}
			}
		}
	}

	.tool-wrap {
		padding: 20rpx;
		box-sizing: border-box;

		.tool-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			.tool-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.tool-left {
				display: flex;
				align-items: center;
			}
		}
	}

	.auth_box {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
		z-index: 9999;

		.auth_box_bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80%;
			height: 306rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.auth_box_top {
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					width: 70%;
					text-align: right;
					font-size: 30rpx;
					font-family: 'PingFang SC';
				}

				image {
					width: 35rpx;
					height: 35rpx;
					margin-left: 50rpx;
				}
			}

			.auth_box_message {
				width: 90%;
				margin: 20rpx auto 0;
				background-color: #F5F5F5;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-left: 10rpx;
					box-sizing: border-box;
				}

				.copy {
					width: 20%;
					background-color: #EC1818;
					color: #fff;
					border-radius: 4rpx;
					padding: 20rpx 10rpx;
					box-sizing: border-box;
					text-align: center;
				}
			}

			.texts {
				width: 100%;
				margin-top: 40rpx;
				text-align: center;
				font-size: 26rpx;
				color: #BCBCBC;
			}
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.share_code {
		color: #fff;
		font-size: 25rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}

	.contact {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods-wrap {
		margin-top: 24rpx;
		padding: 0 24rpx 80rpx;
		box-sizing: border-box;
		background-color: #FBFBFB;

		.title {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0 0;
			box-sizing: border-box;

			text {
				font-size: 32rpx;
				color: #333333;
			}

			.all {
				font-size: 24rpx;
			}
		}

		.goods-con {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.goods-item-con {
			margin-top: 24rpx;
		}
	}

	.loding-con {
		padding-top: 30rpx;
	}

	.loding,
	.loding-end {
		color: #707070;
	}

	.end-t {
		padding: 0 10rpx;
	}
</style>